Home Explore Help
Register Sign In
jamesperet
/
codex
Watch 1
Star 0
Fork 0

Browse Source
Fixed file view items loading issues

James Peret 7 years ago
parent
354010176b
commit
a65e8e2af4
6 changed files with 100 additions and 18 deletions
Show Diff Stats
  1. 1 0
      app/index.html
  2. 1 0
      app/scripts/codex-app.js
  3. 79 11
      app/scripts/controllers/app-ctrl.js
  4. 5 3
      app/scripts/services/file-service.js
  5. 5 4
      app/views/index.html
  6. 9 0
      css/codex.css

+ 1 - 0
app/index.html
View File 

@@ -20,6 +20,7 @@
20 20 
     <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
21 21 
     <script src="../bower_components/angular-ui-ace/ui-ace.js"></script>
22 22 
     <script src="../bower_components/angular-highlightjs/src/angular-highlightjs.js"></script>
23 
+    <script src='../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js'></script>
23 24 
     <script src="scripts/highlight.pack.js"></script>
24 25
25 26

+ 1 - 0
app/scripts/codex-app.js
View File 

@@ -19,6 +19,7 @@ angular
19 19 
     'codexApp.noteView',
20 20 
     'codexApp.noteEdit',
21 21 
     'codexApp.imageView',
22 
+    'infinite-scroll',
22 23 
     'hljs'
23 24 
   ])
24 25

+ 79 - 11
app/scripts/controllers/app-ctrl.js
View File 

@@ -8,25 +8,56 @@
8 8 
  * Controller of the domainManagerApp
9 9 
  */
10 10 
 angular.module('codexApp.index', [])
11 
-  .controller('AppCtrl', ['$scope', '$rootScope', '$state', '$location', 'FileService', 'PrefsService', '$timeout', function ($scope,  $rootScope, $state, $location, FileService, PrefsService, $timeout) {
11 
+  .controller('AppCtrl', ['$scope', '$rootScope', '$state', '$location', 'FileService', 'PrefsService', '$timeout', '$location', '$anchorScroll', function ($scope,  $rootScope, $state, $location, FileService, PrefsService, $timeout, $location, $anchorScroll) {
12 
+
13 
+    var all_files = [];
14 
+    var current_page = 0;
15 
+    var page_count = 5
16 
+    var info_count = 0;
17 
+    var loaded = false;
18 
+    $scope.files = [];
12 19
13 20 
     $scope.setView = function() {
14 
-      $scope.view = PrefsService.getCurrentView();
15 
-      $scope.files = [];
21 
+      $scope.view = PrefsService.getCurrentView()
22 
+      //$scope.files = [];
16 23 
       $timeout(function() {
17 24 
         switch ($scope.view) {
18 25 
           case "All Notes":
19 26 
             var note = { type : "All Notes" }
20 27 
             FileService.setCurrentNote(note);
21 
-            $scope.files = FileService.getAllNotes();
22 
-            var info = $scope.files.length + " Notes"
28 
+            all_files = FileService.getAllNotes();
29 
+            info_count = all_files.length;
30 
+            var f = [];
31 
+            var i = 0;
32 
+            for (i = 0; i <= (page_count * 5); i++) {
33 
+              if(all_files[i] != undefined){
34 
+                f.push(all_files[i])
35 
+              } else {
36 
+                break;
37 
+              }
38 
+            }
39 
+            $scope.files = f;
40 
+            all_files.splice(0, i);
41 
+            var info = info_count + " Notes"
23 42 
             $rootScope.$broadcast('footer:info', info);
24 43 
             break;
25 44 
           case "All Files":
26 45 
             var note = { type : "All Files" }
27 46 
             FileService.setCurrentNote(note);
28 
-            $scope.files = FileService.getAllFiles();
29 
-            var info = $scope.files.length + " Files"
47 
+            all_files = FileService.getAllFiles();
48 
+            info_count = all_files.length;
49 
+            var f = [];
50 
+            var i = 0;
51 
+            for (i = 0; i <= (page_count * 5); i++) {
52 
+              if(all_files[i] != undefined){
53 
+                f.push(all_files[i])
54 
+              } else {
55 
+                break;
56 
+              }
57 
+            }
58 
+            $scope.files = f;
59 
+            all_files.splice(0, i);
60 
+            var info = all_files.length + " Files"
30 61 
             $rootScope.$broadcast('footer:info', info);
31 62 
             break;
32 63 
           case "Notebooks":
 
@@ -46,13 +77,29 @@ angular.module('codexApp.index', [])
46 77 
             $rootScope.$broadcast('footer:info', info);
47 78 
             break;
48 79 
         }
49 
-      }, 1);
80 
+        $location.hash('grid');
81 
+        $anchorScroll();
82 
+        loaded = true;
83 
+        $scope.fader = "fade-in";
84 
+      }, 25);
50 85 
     }
51 86
52 87 
     $scope.setView();
53 88
54 89 
     $rootScope.$on('window-view:change', function(){
55 
-      $scope.setView();
90 
+      console.log("Changin view...");
91 
+      current_page = 1;
92 
+      loaded = false;
93 
+      $scope.fader = "fade-out";
94 
+
95 
+      var state = FileService.getCurrentNote();
96 
+      if(state.type == "All Notes" || state.type == "All Files" || state.type == "Folder"){
97 
+        $scope.setView();
98 
+      } else {
99 
+        $timeout(function() {
100 
+          $state.go($state.current, {}, {reload: true});
101 
+        }, 200);
102 
+      }
56 103 
     });
57 104
58 105 
     var remote = require('remote')
 
@@ -95,10 +142,10 @@ angular.module('codexApp.index', [])
95 142 
     $rootScope.$on('file-service:files-loaded', function(){
96 143 
       if(!$scope.$$phase) {
97 144 
           $scope.$apply(function(){
98 
-            $scope.itemSpacing();
145 
+            //$scope.itemSpacing();
99 146 
           });
100 147 
         } else {
101 
-            $scope.itemSpacing();
148 
+            //$scope.itemSpacing();
102 149 
         }
103 150 
     })
104 151 
 
@@ -179,6 +226,27 @@ angular.module('codexApp.index', [])
179 226 
       menu.popup(currentWindow);
180 227 
     }
181 228
229 
+    $scope.infiniteScroll = function() {
230 
+      if(loaded == true){
231 
+        if (FileService.getCurrentNote().type == "All Notes" || FileService.getCurrentNote().type == "All Files"){
232 
+          if(all_files.length > 0 && $scope.files.length < info_count){
233 
+              current_page = current_page + 1;
234 
+              console.log("scrolling")
235 
+              var i = 0;
236 
+              for (i = 0; i <= page_count; i++) {
237 
+                if(all_files[i] != undefined){
238 
+                  $scope.files.push(all_files[i])
239 
+                } else {
240 
+                  break;
241 
+                }
242 
+
243 
+              }
244 
+              all_files.splice(0, i + 1);
245 
+          }
246 
+        }
247 
+      }
248 
+    }
249 
+
182 250 
     var HTMLNodesToArray = function (reference, elems) {
183 251 
         reference = document.getElementById(reference);
184 252 
         console.log(reference);

+ 5 - 3
app/scripts/services/file-service.js
View File 

@@ -17,6 +17,8 @@ angular.module('codexApp')
17 17 
     var data = JSON.parse(raw_data);
18 18 
     appData = data;
19 19 
     notes_dir = appData.UserDataDirectory;
20 
+    default_notes_dir = notes_dir + "/inbox";
21 
+    default_home_note = notes_dir + "/index.md"
20 22 
     return data
21 23 
   }
22 24 
 
@@ -33,7 +35,7 @@ angular.module('codexApp')
33 35 
       // Generate file
34 36 
       file_path = path + "/UserData.json";
35 37 
       console.log("-> Generating user settings file: '" + file_path + "'");
36 
-      var content = '{ "UserDataDirectory" : "' + defaultUserContentPath +'" }';
38 
+      var content = '{ "UserDataDirectory" : "' + defaultUserContentPath +'", "thumbs" : [] }';
37 39 
       mkdirSync(defaultUserContentPath);
38 40 
       console.log(content);
39 41 
       saveAppData(JSON.parse(content));
 
@@ -60,8 +62,8 @@ angular.module('codexApp')
60 62 
   console.log("-> Loading content from folder: " + appData.UserDataDirectory);
61 63
62 64
63 
-  var default_notes_dir = "/Users/james/dev/codex/codex/inbox";
64 
-  var default_home_note = "/Users/james/dev/codex/codex/index.md"
65 
+  var default_notes_dir = "/codex/inbox";
66 
+  var default_home_note = "/codex/index.md"
65 67 
   var notes = [];
66 68 
   var current_note = "";
67 69 
   var note_history = [];

+ 5 - 4
app/views/index.html
View File 

@@ -19,14 +19,14 @@
19 19 
   </tbody>
20 20 
 </table>
21 21
22 
-<div class="file-view">
23 
-  <ul id="grid">
24 
-    <li ng-repeat="file in files track by $index" ng-dblclick="openFile(file)" class="file-view-item fade-in" isotope-item="{{file.path}}">
22 
+<div class="file-view" style="height: 100%; overflow-y: scroll">
23 
+  <ul id="grid" infinite-scroll='infiniteScroll()' infinite-scroll-distance='4' infinite-scroll-immediate-check="false" infinite-scroll-parent="true">
24 
+    <li ng-repeat="file in files track by $index" ng-dblclick="openFile(file)" class="file-view-item" ng-class="fader" isotope-item="{{file.path}}" style="display: block;">
25 25 
       <div class="thumbnail-icon" ng-show="file.type != 'Folder'" ng-right-click="fileContextMenu(file)">
26 26 
         <img src="{{getImageURL(file.path)}}" ng-hide="isImage(file.type)">
27 27 
         <img src="{{file.thumbnail}}" ng-show="isImage(file.type)">
28 28 
       </div>
29 
-      <div class="notebook-icon" ng-show="file.type == 'Folder'">
29 
+      <div class="notebook-icon ng-hide" ng-show="file.type == 'Folder'">
30 30 
         <img class="notebook-thumbnail" src="content/imgs/folder-gray-icon.png" >
31 31 
         <div class="notebook-icon-title">{{file.title}}</div>
32 32 
         <div class="notebook-icon-info">{{file.size}}</div>
 
@@ -34,5 +34,6 @@
34 34 
       <div class="icon-name" ng-show="file.type != 'Folder'">{{file.title}}</div>
35 35 
       <div class="icon-name" ng-show="file.type == 'Folder'">{{file.title}}</div>
36 36 
     </li>
37 
+    <div style='clear: both;'></div>
37 38 
   </ul>
38 39 
 </div>

+ 9 - 0
css/codex.css
View File 

@@ -225,6 +225,7 @@ code.hljs .hljs-title {
225 225
226 226 
 /* make keyframes that tell the start state and the end state of our object */
227 227 
 @keyframes fadeIn { from {  opacity:0; ransform: scale(0.3); } to { opacity:1; transform: scale(1);} }
228 
+@keyframes fadeOut { from {  opacity:100; ransform: scale(1); } to { opacity:0; transform: scale(0.3);} }
228 229
229 230 
 .fade-in {
230 231 
   opacity:0;  /* make things invisible upon start */
 
@@ -234,6 +235,14 @@ code.hljs .hljs-title {
234 235 
   animation-duration:0.2s;
235 236 
 }
236 237
238 
+.fade-out {
239 
+  opacity: 100;
240 
+  transform: scale(0.3);
241 
+  animation: fadeOut ease-in 1;
242 
+  animation-fill-mode:forwards;
243 
+  animation-duration:0.2s;
244 
+}
245 
+
237 246 
 .centered {
238 247 
   position: relative;;
239 248 
   top: 50%;